<template>
<div class="bottom-container">
    <div class="left">
        <div class="sc">
            <i class="sc-icon"></i>
            <span>收藏</span>
        </div>
        <div class="hj">
            <i class="hj-icon"></i>
            <span>还价</span>
        </div>
    </div>
    <div class="right">立即购买</div>
</div>
</template>
<script>
export default {
    name:'DetailBottom'
}
</script>
<style lang="scss" scoped>
.bottom-container{
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: rem(140);
    min-width: 320px;
    max-width: 750px;
    .left{
        float: left;
        width: 50%;
        height: 100%;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        .sc,
        .hj{
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
        border-right: 1px solid #f5f5f5;
        .sc-icon{
        position: absolute;
        top: rem(20);
        right: 50%;
        width: rem(60);
        height: rem(60);
        margin-right: rem(-30);
        background: url(../../../assets/imgs/sc.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        }
        .hj-icon{
        position: absolute;
        top: rem(20);
        right: 50%;
        margin-right: rem(-30);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/hj.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        }
        span{
            position: absolute;
            width: rem(80);
            bottom: rem(10);
            right: 50%;
        margin-right: rem(-40);
        text-align: center;
        font-size: rem(35);
            

        }
        }
        
    }
    .right{
        float: left;
        width: 50%;
        height: 100%;
        line-height: 3;
        background-color: #e74e4b;
        font-size: rem(50);
        font-weight: 700;
        color: #fff;
        text-align: center;
    }
}

</style>